<template>
    <!-- Echarts容器 -->
   <div class="charts" ref="myecharpay">

   </div>
</template>

<script>
import * as  echarts from 'echarts'


export default {
   name:'progressChart',
   props:['count'],
   data() {
    return {
    }
   },
   methods:{
       getEchart(){
            const myChartPay = echarts.init(this.$refs.myecharpay) 
            console.log("echarts",myChartPay)
            let  option = {
               grid:{ 
                       left: 0,
                       right: 0,
                       top:0,
                       bottom:0
                   },
               xAxis: {
                   // 隐藏x轴
                    show: false,
                    type: 'value',
                    //最小值与最大值设置
                    min:0,
                    max:100

                },
               yAxis: {
                   //隐藏y轴 
                    show: false,
                   //均分
                    type: 'category',
                },
                 // 系列的设置：绘制什么类型的图表、数据的展示在这里设置
                series: [
                    {
                        type: 'bar',
                        data:[this.count],
                        color:'#13ce66',
                        barWidth: '30%',
                        //开启背景样式
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)'
                        },
                        //文本设置
                        label:{
                            show: true,
                            formatter:'|',
                            color:'#fff',
                            fontWeight: "bold",
                            fontSize: 12,
                            height:'20',
                            borderWidth: 1,
                            borderColor: "#13ce66",
                            position: 'right'
                        }
                    }
                ]
            };
            myChartPay.setOption(option)
            window.addEventListener("resize", () => {//监听浏览器窗口大小
                if(myChartPay){
                    myChartPay.resize();
                }
            });
        }
   },
   mounted(){
       this.getEchart()
   }
}
</script>

<style scoped>
    .charts{
       width: 100%;
       height: 90%;
   }
</style>